<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!--<script src="../lib/underscore-min.js" type="text/javascript"></script>-->
</head>
<body>

	<table border="1">
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>地址</th>
			</tr>
		</thead>

		<tbody id="tbody">
			<!--<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
				<td>地址</td>
			</tr>-->
		</tbody>
	</table>

	<!--<script id="trTpl" type="text/tmplate">-->
		<!--<tr>-->
			<!--<td><%=name%></td>-->
			<!--<td><%=age%></td>-->
			<!--<td><%=gender%></td>-->
			<!--<td><%=address%></td>-->
		<!--</tr>-->
	<!--</script>-->

	<script>

		var arr = [
			{
				name: 'aaa',
				age: 20,
				gender: '男',
				address: '北京市海淀区'
			},
			{
				name: 'bbb',
				age: 22,
				gender: '男',
				address: '北京市海淀区'
			},
			{
				name: 'ccc',
				age: 21,
				gender: '男',
				address: '北京市海淀区'
			},
			{
				name: 'ddd',
				age: 20,
				gender: '男',
				address: '北京市海淀区'
			},
			{
				name: 'eee',
				age: 25,
				gender: '男',
				address: '北京市海淀区'
			},
			{
				name: 'fff',
				age: 30,
				gender: '男',
				address: '北京市海淀区'
			},
			{
				name: '郭德纲',
				age: 40,
				gender: '男',
				address: '天津市红桥区'
			}
		];

		function renderTable() {

			var i, len = arr.length, trArr = [];

			for (i=0; i<len; i++) {
				trArr.push(
					'<tr>',
						'<td>', arr[i].name, '</td>',
						'<td>', arr[i].age, '</td>',
						'<td>性别</td>',
						'<td>', arr[i].address, '</td>',
					'</tr>'
				);
			}

			// console.log(trArr);

			document.getElementById('tbody').innerHTML = trArr.join('');
		}

        renderTable();

//		window.onload = renderTable;

//		function renderTable(tmpArr) {
//			var trs = [];
//			var tpl = document.getElementById('trTpl').innerHTML;
//			var compiled = _.template(tpl);
//			var tbody = document.getElementById('tbody');
//
//			_.each(tmpArr, function(obj) {
//				// console.log(obj)
//				// console.log(compiled(obj))
//				trs.push(compiled(obj));
//			});
//
//			tbody.innerHTML = trs.join('');
//
//			// console.log(trs)
//		}

//		renderTable(arr);
		

		/*var tbody = document.getElementsByTagName('tbody')[0],
			len = arr.length,
			adf = [],
			i;

			for(i=0; i<len; i++) {
				adf.push(
					'<tr>',
						'<td>',arr[i].name,'</td>',
						'<td>',arr[i].age,'</td>',
						'<td>',arr[i].gender,'</td>',
						'<td>',arr[i].address,'</td>',
					'</tr>'
					);
			}

			tbody.innerHTML = adf.join('');*/
			// console.log(adf);
		


		/*var a = [1, 2, 3, 5, 6, 9];

		_.each(a, function(item) {
			console.log(item);
		});*/

		/*var b = [1, 2, 3];
		var c = _.map(b, function(num){ return '<option>' + num + '</option>'; });

		console.log(c);*/
	</script>
	
</body>
</html>